<template>
    <div class="albums">
        <div class="common-layout">
            <el-container>
                <el-aside width="200px">

                    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                        router>
                        <el-input v-model="input" placeholder="请输入学校名称" />
                        <el-sub-menu index="1" @click="changeMenu">

                            <template #title>
                                <el-icon v-if="!isCollapse">
                                    <Plus />
                                </el-icon>
                                <el-icon v-else>
                                    <Minus />
                                </el-icon>
                                <span>全部</span>
                            </template>

                            <el-sub-menu index="1-1" @click.stop="changebMenu">

                                <template #title>
                                    <el-icon v-if="!issubCollapsed">
                                        <Plus />
                                    </el-icon>
                                    <el-icon v-else>
                                        <Minus />
                                    </el-icon>
                                    <el-menu-item class="educa">
                                        小学
                                    </el-menu-item>
                                </template>

                                <el-sub-menu index="1-1-1" @click.stop="changesubMenu">

                                    <template #title>
                                        <el-icon v-if="!issubCollapse">
                                            <Plus />
                                        </el-icon>
                                        <el-icon v-else>
                                            <Minus />
                                        </el-icon>
                                        <el-menu-item class="test">
                                            实验小学
                                        </el-menu-item>
                                    </template>

                                    <div @click.stop>
                                        <el-menu-item index="1-1-1-1">
                                            一年级
                                        </el-menu-item>
                                    </div>
                                    <div @click.stop>
                                        <el-menu-item index="1-1-1-2">
                                            二年级
                                        </el-menu-item>
                                    </div>
                                    <div @click.stop>
                                        <el-menu-item index="1-1-1-3">
                                            三年级
                                        </el-menu-item>
                                    </div>
                                </el-sub-menu>
                            </el-sub-menu>
                        </el-sub-menu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <div class="right">
                        <div class="top">
                            <p>发布日期:</p>
                            <el-time-picker
                              v-model="value1"
                              is-range
                              range-separator="To"
                              start-placeholder="Start time"
                              end-placeholder="End time"
                            />
                            <el-input class="content" v-model="input" placeholder="请输入发布者姓名" width="200px" />
                            <el-button type="primary">查询</el-button>
                        </div>
                        <div class="bottom">
                            <div class="list">
                                <div class="img">
                                    <img src="" alt="">
                                </div>
                                <div class="text">
                                    <p>{{ getPhotosByPage[0].name }}</p>
                                    <p>{{ getPhotosByPage[0].initTime }}</p>
                                    <p>{{ getPhotosByPage[0].detail }}</p>
                                    <div class="imglist">
                                        {{ getPhotosByPage[0].photoList.img }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </div>
    </div>
</template>

<script setup>

const getPhotosByPage = ref([])

import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue';
import server from '@/api';

var isCollapse = ref(false)
var changeMenu = () => {
    isCollapse.value = !isCollapse.value
}
var issubCollapsed = ref(false)
var changebMenu = () => {
    issubCollapse.value = !issubCollapse.value
}
var issubCollapse = ref(false)
var changesubMenu = () => {
    issubCollapse.value = !issubCollapse.value
}

onMounted(async () => {
    var res = await server.jiaxiaohutong.photos_getPhotosByPage()
    console.log(res.data.data.date)
    getPhotosByPage.value = res.data.data.date
    console.log(getPhotosByPage.value);
})

</script>

<style scoped lang="scss">
.el-menu {
    height: 600px;
    background-color: #fff;
    margin-right: 20px;
}

.el-main {
    height: 600px;
    background-color: #fff;
}

.eduction .common-layout input {
    width: 197px;
    height: 30px;
    border-radius: 5px;
    border-color: #e3e3e3;
    margin-bottom: 5px;
}

:deep(.educa) {
    width: 50px;
    display: flex;
    right: 40px;
    margin-right: 500px;
}

:deep(.test) {
    width: 100%;
    right: 60px;
}

.is-active {
    text-align: left;
    padding-left: 10px;
}
.right .top{
    height: 60px;
    display: flex;
    align-items: center;
    p{
        margin-right: 10px;
    }
    .content{
        margin: 0 10px;
    }
}
.bottom{
    display: flex;
}
</style>